<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="新增产品"></u-navbar> -->
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 55px);" :show-scrollbar="false">
			<view style=" background-color:#EFEDE9;">
				<view class="pl-2 pr-2 font-14 lineHight-40 font-weight-bold">服务信息</view>
			</view>
			<view class="pl-3 pb-2">
				<u-form :model="form" ref="uForm">
					<u-form-item style="padding-right: 10px;" required label-width="180" label="产品名称"
						prop="productInformId">
						<u-input v-model="valueListCp" placeholder="请选择产品名称" :type="type" input-align="right"
							:border="false" @click="valueListCpHandler" />
						<u-picker @confirm="selectValueListCp" mode="selector" v-model="selectValueListCpBusiness"
							:default-selector="[0]" :range="valueListCpBusinessList" range-key="text"></u-picker>
					</u-form-item>
					<u-form-item required :label-style="labelStyle" label="产品品类" prop="productTypeName">
						<u-input class="mr-3 " :disabled="true" placeholder="选择产品后自动显示产品品类"
							v-model="form.productTypeName" input-align="right" />
					</u-form-item>
					<u-form-item required :label-style="labelStyle" label="数量" prop="productNumber">
						<u-input class="mr-3 " v-model="form.productNumber" placeholder="请输入数量" input-align="right" />
						<text class="mr-3 ">{{form.productSpecsText}}</text>
					</u-form-item>
					<u-form-item v-if="userInfo.parentId === null" required :label-style="labelStyle" label="企业名称"
						prop="enterpriseName">
						<u-input class="mr-3" :disabled="true" v-model="userInfo.enterpriseName" input-align="right" />
					</u-form-item>
					<u-form-item v-else required :label-style="labelStyle" label="企业名称" prop="parentEnterpriseName">
						<u-input class="mr-3" :disabled="true" v-model="userInfo.parentEnterpriseName"
							input-align="right" />
					</u-form-item>

					<u-form-item required :label-style="labelStyle" label="产品季节时间" prop="productEndTime">
						<view class="example-body position-absolute right-1">
							<!-- date/daterange/datetime/datetimerange -->
							<uni-datetime-picker 
							:add="true"
							v-model="range" type="daterange" rangeSeparator="至" />
						</view>
					</u-form-item>

					<u-form-item style="padding-right: 10px;" required label-width="180" label="基地名称"
						prop="productInformId">
						<u-input v-model="valueProductName" placeholder="请选择基地名称" :type="type" input-align="right"
							:border="false" @click="showNatureBusinessHandler" />
						<u-picker @confirm="selectNatureBusiness" mode="selector" v-model="showNatureBusiness"
							:default-selector="[0]" :range="natureBusinessList" range-key="text"></u-picker>
					</u-form-item>

					<u-form-item required :label-style="labelStyle" label="基地地址" prop="baseAddress">
						<u-input class="mr-3 " placeholder="选择基地后自动显示基地地址" :disabled="true" v-model="form.baseAddress"
							input-align="right" />
					</u-form-item>
					<u-form-item required :label-style="labelStyle" label="联系人" prop="contacts">
						<u-input class="mr-3 " placeholder="选择基地后自动显示联系人" :disabled="true" v-model="form.contacts"
							input-align="right" />
					</u-form-item>
					<u-form-item required :label-style="labelStyle" label="联系电话" prop="phone">
						<u-input class="mr-3 " placeholder="选择基地后自动显示联系电话" :disabled="true" v-model="form.phone"
							input-align="right" />
					</u-form-item>
					<view style=" background-color:#EFEDE9;">
						<view class="pl-2 pr-2 font-14 lineHight-40 font-weight-bold">上/下架状态</view>
					</view>
					<u-form-item required style="padding-right: 10px;" :label-style="labelStyle" label="上/下架状态"
						prop="name">
						<u-input v-model="valueList" :type="type" placeholder="请选择上/下架状态" input-align="right"
							:border="false" @click="showListIp = true" />
						<u-action-sheet :list="productStatus" v-model="showListIp"
							@click="actionSheetCallback"></u-action-sheet>
					</u-form-item>
				</u-form>
			</view>
			<ferrButton title="确认新增产品" @click="submit"></ferrButton>
		</scroll-view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	// import calendar from "@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue";
	// import calendars from "@/uni_modules/uni-calendars/components/uni-calendar/uni-calendar.vue";
	export default {
		components: {
			ferrButton,
			// calendar,
			// calendars
		},

		data() {
			return {
				form: {
					productNumber: '',
					productStartTime: '',
					productEndTime: '',
					baseId: '',
					productStatus: '',
					productTypeName: '',
					productSpecsText: '',
					productNameId: '',
					baseId: '',
					baseAddress: '',
					contacts: '',
					phone: '',
				},
				agricultureUserId: null,
				valueAssa: '',
				valueList: '',
				valueListCp: '',
				type: 'select',
				showData: false,
				selectedDate: null,
				selectedDateTime: null,
				showListIp: false,
				showList: false,

				border: true,
				labelStyle: {
					width: '150px'
				},
				productStatus: [{
						text: '下架',
						value: 0
					},
					{
						text: '上架',
						value: 1
					},
				],
				actionList: [],

				mode: 1,
				rules: {
					productNumber: [{
							required: true,
							message: '请输入数量',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								const reg = /^[0-9]+(\.[0-9]+)?$/; // 允许输入整数和小数
								if (!reg.test(value)) {
									callback(new Error('请输入数字'));
								} else {
									callback();
								}
							},
							trigger: ['change', 'blur'],
						}
					]

				},
				userInfo: null,

				valueListCpBusinessList: [],
				selectValueListCpBusiness: false,

				valueProductName: '',
				showNatureBusiness: false,
				natureBusinessList: [],

				// range: this.getInitialRange() // 初始化range
				range:['2024-06','2024-10']
			}
		},
		onLoad() {

		},
		onShow() {
			this.productName();
			const userInfo = uni.getStorageSync('userInfo');
			this.id = userInfo.id
			this.getBaseInformAllList(this.id);
			if (userInfo) {
				this.userInfo = userInfo;
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// getInitialRange() {
			// 	const now = new Date();
			// 	const year = now.getFullYear();
			// 	const month = (now.getMonth() + 1).toString().padStart(2, '0');
			// 	const startOfMonth = `${year}-${month}-01`;
			// 	const endOfMonth = new Date(year, now.getMonth() + 1, 0).toISOString().split('T')[0];
			// 	return [startOfMonth, endOfMonth];
			// },
			// 产品名称
			valueListCpHandler() {
				this.selectValueListCpBusiness = true;
			},
			selectValueListCp(e) {
				this.valueListCp = this.valueListCpBusinessList[e[0]].text;
				this.form.productNameId = this.valueListCpBusinessList[e[0]].id,
					this.form.productTypeName = this.valueListCpBusinessList[e[0]].productTypeName;
				this.form.productSpecsText = this.valueListCpBusinessList[e[0]].productSpecsText;
			},
			productName() {
				$H.get(
					`/basisInform/productName/list`, {}, {}
				).then((res) => {
					this.valueListCpBusinessList = (res.result.records || []).map((v) => {
						return {
							text: v.productName,
							id: v.id,
							productTypeName: v.productTypeName,
							productSpecsText: v.productSpecsText,
						}
					})
					const target = this.valueListCpBusinessList.find(
						(v) => v.id === this.form.id
					)
					this.valueListCp = target ? target.text : ''
				})
			},

			// 基地名称
			showNatureBusinessHandler() {
				this.showNatureBusiness = true;
			},
			selectNatureBusiness(e) {
				this.valueProductName = this.natureBusinessList[e[0]].text;
				this.form.baseId = this.natureBusinessList[e[0]].id;
				this.form.baseAddress = this.natureBusinessList[e[0]].baseAddress;
				this.form.contacts = this.natureBusinessList[e[0]].contacts
				this.form.phone = this.natureBusinessList[e[0]].phone
			},
			getBaseInformAllList(id) {
				$H.get(
					`/agriculture/baseInform/getBaseInformAllList`, {
						agricultureUserId: id
					}, {}
				).then((res) => {
					this.natureBusinessList = (res.result || []).map((v) => {
						return {
							text: v.baseName,
							id: v.id,
							baseAddress: v.baseAddress,
							contacts: v.contacts,
							phone: v.phone,

						}
					})
					const target = this.actionList.find(
						(v) => v.id === this.form.baseId
					)
					this.valueProductName = target ? target.text : ''
				})
			},

			// 上架状态回调函数
			actionSheetCallback(index) {
				this.valueList = this.productStatus[index].text;
				this.form.productStatus = this.productStatus[index].value;
			},

		
			// 提交新增产品
			formatDate(dateString) {
				// 假设日期格式为 YYYYMM
				return dateString.slice(0, 4) + '-' + dateString.slice(4);
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$refs.uForm.validate(valid => {
							let o = {
								...this.form,
								enterpriseName: this.userInfo.enterpriseName,
								productStatus: this.form.productStatus,
								productStartTime: this.formatDate(this.range[0]),
								productEndTime: this.formatDate(this.range[1])
							}
							$H.post(`/agriculture/productInform/agriculture/add`, o, {})
								.then((res) => {
									if (res.code === 200) {
										uni.showToast({
											title: res.message,
											icon: 'none',
											duration: 4000
										})
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											});
										}, 4000);
									} else {
										uni.showToast({
											title: res.message,
											icon: 'none',
										})
									}
								})
								.catch(() => {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
								})
						}, );
					} else {
						uni.showToast({
							title: "请完整填写表单",
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
</style>